<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script src="../assets/lib/echarts/echarts.min.js"></script>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例

      const list = [
        { province: "湖南省" },
        { province: "云南省" },
        { province: "西藏自治区" },
        { province: "湖南省" },
        { province: "甘肃省" },
        { province: "甘肃省" },
        { province: "内蒙古自治区" },
        { province: "山东省" },
        { province: "江苏省" },
        { province: "云南省" },
        { province: "广西壮族自治区" },
        { province: "广西壮族自治区" },
        { province: "广东省" },
        { province: "广西壮族自治区" },
        { province: "河北省" },
        { province: "黑龙江省" },
        { province: "新疆维吾尔自治区" },
        { province: "西藏自治区" },
        { province: "湖南省" },
        { province: "新疆维吾尔自治区" },
        { province: "广西壮族自治区" },
        { province: "内蒙古自治区" },
        { province: "河南省" },
        { province: "西藏自治区" },
        { province: "云南省" },
        { province: "甘肃省" },
        { province: "黑龙江省" },
        { province: "山东省" },
        { province: "新疆维吾尔自治区" },
        { province: "西藏自治区" },
        { province: "河南省" },
        { province: "黑龙江省" },
        { province: "广西壮族自治区" },
        { province: "山东省" },
        { province: "广东省" },
        { province: "广东省" },
        { province: "江苏省" },
        { province: "广西壮族自治区" },
        { province: "湖南省" },
        { province: "江苏省" },
        { province: "山东省" },
        { province: "广西壮族自治区" },
        { province: "黑龙江省" },
        { province: "湖南省" },
        { province: "黑龙江省" },
        { province: "广东省" },
        { province: "广东省" },
        { province: "西藏自治区" },
        { province: "云南省" },
        { province: "西藏自治区" },
        { province: "湖南省" },
        { province: "山东省" },
        { province: "内蒙古自治区" },
        { province: "内蒙古自治区" },
        { province: "湖南省" },
        { province: "广西壮族自治区" },
      ];
      function funcList(list) {
        const newList = [];
        for (let index = 0; index < list.length; index++) {
          const ele = list[index];
          //在新的数组里面进行遍历  查找下标
          const i = newList.findIndex((item) => item.name === ele.province);
          if (i === -1) {
            //判断如果新数组的下标完全等于-1 就表示没有添加过  则进行 push
            newList.push({ value: 1, name: ele.province });
          } else {
            //如果在新数组已经存在相同的下标  就进行value值++
            newList[i].value++;
          }
        }
        const myChart = echarts.init(document.querySelector("#main"));
        const option = {
          series: [
            {
              name: "Nightingale Chart",
              type: "pie",
              radius: [25, 150],
              center: ["50%", "50%"],
              roseType: "area",
              itemStyle: {
                borderRadius: 8,
              },
              data: newList,
            },
          ],
        };
        myChart.setOption(option);
      }
      funcList(list);
    </script>
  </body>
</html>
